<!-- @author zhengjie -->
<template>
  <div class="icon-body">
    <!-- 头部导航++++++++++++++++++++++ -->
    <div class="space-between center cursor" style="padding-top: 10px;background: #fff;padding-bottom: 10px;border-radius: 10px;">
      <!-- <div class="center" @click="toUrl('/center/noticeList/')"> -->

      <div class="center" @click="handleUpdate()">
        <img style="width: 34px;height: 34px;margin-left: 33px;" referrerpolicy="no-referrer" src="@/assets/images/lb.png" />
        <div class="  f_bold ml_20 f_22 ">公告：</div>
        <div class="f_20 " v-if="notice_title">最新</div>
        <div class="f_20  ml_5 mr_5" v-if="notice_title">|</div>
        <div class="f_20 " v-if="notice_title">{{notice_title}}</div>
      </div>

      <div class="row center" style="margin-right: 30px;">
        <!-- <div class="qugwbt center cursor" style="margin-right: 80px;" @click="toUrl('/login')">前往官网</div> -->


        <div v-if="username" class="row center ">

          <!-- <div style="position: relative;" @click="message_click" v-if="messagenum"> -->
          <div style="position: relative;" @click="message_click">
            <i class="el-icon-message-solid lbb"></i>
            <div v-if="messagenum" class="hongdd center">{{messagenum}}</div>
          </div>


          <div class="f18 f_bold cursor  kfzdj center " style="min-width: 140px;padding-left: 10px;padding-right: 10px; margin-right: 20px;">开发者id:{{user_id}}</div>
          <div v-if="user_info.audit_status !=3" class=" kfzdjb center ml_10 mr_10">暂未认证</div>

          <div v-else class=" kfzdjb center ml_10 mr_10">开发者等级{{user_info.dev_class}}</div>

          <div class="center mr_5 cursor" @click="toUrl('/center/personalm')">
            <el-avatar v-if="avatar" :size="40" :src="avatar"></el-avatar>
            <img v-else style="height: 35x;width: 42px;" src="@/assets/images/tx.png"></img>

          </div>

          <div class="f18 f_bold cursor mr20">{{username}}</div>

          <div class="ml20 row_a_c">
            <img style="height: 20px;width: 20px;margin-right: 10px;" src="@/assets/images/tc.png" />
            <div @click="logout" class="f18 f_bold cursor mr20">退出系统</div>
          </div>

        </div>



        <div v-else class="row center">
          <div class="center mr_5 cursor">
            <img style="height: 35x;width: 42px;" src="@/assets/images/tx.png"></img>
          </div>
          <div @click.prevent="childMethod(1)" class="f18 f_bold  cursor ml_16">登录/</div>
          <div @click.prevent="childMethod(2)" class="color_1A82FB cursor">注册</div>
        </div>




      </div>
    </div>

    <el-dialog :visible.sync="open" width="65%" append-to-body style="margin-top: 6%;" center>
      <div class="column center">
        <div style="color: #448DFF;" class="f_20 f_bold">{{noticeInfo.title}}</div>
      </div>
      <div class="mt10" style="#ABABAB">发布于{{noticeInfo.created_at}}</div>
      <div class="f_18" style="#000000" v-html="noticeInfo.content"></div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>




    <el-dialog style="margin-top: 200px;" :visible.sync="message_show" width="46%" :before-close="handleCloseMessage">
      <div class="wdtitle">未读消息({{messagenum}})</div>
      <div class="xian"></div>
      <div style="height: 600px;margin-top: 20px;">
        <div>
          <div class="row_a_c xiao" v-for="item in messageList" :key="item.ulid" :value="item.id">
            <i class="el-icon-message-solid lbbtw"></i>
            <div class="xiaoxwz">{{item.content}}</div>
          </div>
        </div>
      </div>
    </el-dialog>


    <!-- 头部导航=============== -->
  </div>
</template>

<script>
  import {
    getToken,
    setToken,
    removeToken
  } from '@/utils/auth'
  import * as User from "@/api/system/user";
  import * as Notice from "@/api/system/notice";
  export default {
    name: 'Navv',
    data() {
      return {
        messagenum: 0,
        messageList: [],
        open: false,
        message_show: false,
        NoticeList: [],
        notice_title: '',
        notice_id: '',
        noticeInfo: {},
        user_info: {
          audit_status: 3,
        }, //用户详情
        avatar: null,
        username: '',
        user_id: '',
        // avatar:this.store.getters.avatar,
        // name:this.store.getters.name,
        // circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      }
    },



    created() {
      var token = getToken();
      if (token) {
        this.getUserInfo(); //查询用户详情
      } else {
        localStorage.clear()
      }
      // 读取缓存
      this.username = localStorage.getItem('username')
      this.avatar = localStorage.getItem('avatar')


      this.user_id = localStorage.getItem('user_id')

      this.getNoticeList(); //查询通知，公告列表

      this.getMessageList(); //消息列表(与公告不同)

    },

    methods: {

      message_click() {
        this.message_show = true;
      },

      async logout() {
        this.$confirm('确定注销并退出系统吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            this.$store.dispatch('LogOut').then(() => {
              localStorage.clear();
              location.href = '/';
            });
          })
          .catch(() => {});
      },


      // 公告详情
      handleUpdate(row) {

        if (!this.notice_title) {
          const h = this.$createElement;
          this.$notify({
            title: '',
            message: h('i', {
              style: 'color: teal'
            }, '当前没有更多消息')
          });
        } else {
          this.loading = true;
          var per = {}
          per.type_pj = 1
          per.ulid = this.notice_id
          Notice.detail(per).then(response => {
            this.open = true;
            this.noticeInfo = response.data.info
            this.loading = false;
          })
        }

      },

      /**获取网站公告最新一条 */
      getNoticeList() {
        this.loading = true;
        var per = {}
        per.type_pj = 1
        Notice.info(per).then(response => {
          this.notice_title = response.data.info.title;
          this.notice_id = response.data.info.ulid;
          this.loading = false;
        });
      },

      //消息列表(与公告不同)
      getMessageList() {
        this.loading = true;
        var per = {}
        per.type_pj = 1
        per.user_id = this.user_id;
        per.platform = 'biqi-developer-platform'
        Notice.messageList(per).then(response => {
          this.messageList = response.data.list;
          this.messagenum = response.data.pagination.totalCount;
          this.loading = false;
        });
      },

      //关闭弹框，未读消变为已读消息
      handleCloseMessage() {
        var per = {}
        per.type_pj = 1
        per.user_id = this.user_id;
        per.platform = 'biqi-developer-platform'
        Notice.messageUpdate(per).then(response => {
          this.message_show = false
          this.getMessageList()
        });
      },

      // 取消按钮
      cancel() {
        this.open = false;
      },
      /**查询用户详情 */
      getUserInfo() {
        //audit_status 1：未提交，2：已提交 3：审核通过 4：审核失败'

        this.loading = true;
        User.getUserInfo().then(response => {
          this.user_info = response.data
          localStorage.setItem('userInfo', JSON.stringify(this.user_info))
          localStorage.setItem('username', response.data.username)
          localStorage.setItem('avatar', response.data.avatar)
          this.avatar = response.data.avatar;
          localStorage.setItem('user_id', response.data.id)
          localStorage.setItem('wallet_balance', response.data.wallet_balance)
          this.loading = false;
        });
      },


      async logout() {
        this.$confirm('确定注销并退出系统吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('LogOut').then(() => {
            localStorage.clear();
            location.href = '/index';
          })
        }).catch(() => {});
      },




      toUrlr(url) {
        var token = getToken();
        if (!token) {
          this.$message({
            message: '请先登录',
            type: 'warning'
          });
          return
        }

        // if (this.user_info.audit_status != 3) {
        //   this.$message({
        //     message: '请先实名认证',
        //     type: 'warning'
        //   });
        //   return
        // }

        this.$router.push({
          path: url
        })
      },

      toUrl(url) {

        this.$router.push({
          path: url
        })
      },

      toUrlc(url, id = '') {
        this.$router.replace({
          path: url,
          query: {
            id: id,
          }
        })
      },

      childMethod(type) {
        //type 1登录 2注册
        this.$parent.fatherMethod(type);
      }

    }
  }
</script>


<style rel="stylesheet/scss" lang="scss" scoped>
  .icon-body {
    margin-left: 15px;
    // margin-top: 20px;
    margin-right: 15px;

  }

  .boxs1 {
    padding: 10px;
    width: 150px;
    height: 95px;
    background: #FFFFFF;
    box-shadow: 0px 3px 6px 0px rgba(125, 124, 130, 0.5);
    border-radius: 5px;
    position: fixed;
    top: 70px;
    left: 520px;
  }

  .boxs2 {
    padding: 10px;
    width: 150px;
    height: 95px;
    background: #FFFFFF;
    box-shadow: 0px 3px 6px 0px rgba(125, 124, 130, 0.5);
    border-radius: 5px;
    position: fixed;
    top: 70px;
    left: 690px;
  }

  .xjt {
    font-size: 22px;
    margin-top: 5px;
    margin-left: 5px;
  }

  .qugwbt {
    width: 95px;
    height: 37px;
    background: #1A82FB;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    font-size: 18px;
    font-weight: normal;
    color: #FFFFFF;
    line-height: 22px;
    font-weight: bold;
  }


  ::v-deep .el-dropdown {
    display: inline-block;
    position: relative;
    color: #000000;
    font-size: 18px;
    font-weight: bold;
  }

  ::v-deep .el-icon-arrow-down:before {
    font-size: 20px;
    content: "";
  }

  .kfzdj {
    width: 120px;
    height: 38px;
    background: #3FC1C9;
    border-radius: 5px;

    font-size: 16px;
    // font-family: Source Han Sans SC;
    font-weight: 500;
    color: #fff;
  }

  .kfzdjb {
    width: 120px;
    height: 38px;
    background: #3FC1C9;
    border-radius: 5px;

    font-size: 16px;
    font-weight: 500;
    color: #fff;
  }

  .lbb {
    font-size: 36px;
    color: #3FC1C9;
    margin-right: 20px;
  }

  .hongdd {
    top: 3px;
    left: -3px;
    position: absolute;
    font-size: 12px;
    color: #fff;
    width: 15px;
    height: 15px;
    background: red;
    border-radius: 15px;
  }

  .wdtitle {
    font-size: 18px;
    font-weight: 500;
    color: #000000;
  }

  .xian {
    margin-top: 15px;
    height: 1px;
    background: #F2F2F2;
  }

  .xiao {
    padding-left: 20px;
    height: 46px;
    background: #F5FCFC;
    margin-bottom: 20px;
  }

  .lbbtw {
    font-size: 20px;
    color: #3FC1C9;
    margin-right: 20px;
  }

  .xiaoxwz {
    font-size: 14px;
    font-weight: 500;
    color: #3D3D3D;
  }


  ::v-deep .el-dialog--center .el-dialog__body {
    min-height: 600px;
  }
</style>
